<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <base href="${APP_PATH}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>教学管理系统</title>
    <link rel="icon" href="public/favicon.ico" type="image/ico">
    <%@include file="/commons.jsp" %>
    <link rel="stylesheet" href="/public/css/zTreeStyle.css">
    <script src="/public/js/jquery.ztree.all-3.5.min.js"></script>
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }
    </style>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <%@ include file="/menu.jsp" %>
        <!--End 左侧导航-->
        <!--头部信息-->
        <%@ include file="/head.jsp" %>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <ul id="treeDemo" class="ztree"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<script type="text/javascript">
    let setting = {
        async: {
            enable: true,
            url: "manage/permission/assignPermissionShow",
            dataFilter: filter
        },
        view: {
            selectedMulti: false,
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
        },
        edit: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename,
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }

    function beforeRemove(treeId, treeNode) {
        let zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("确认删除--" + treeNode.name + "--吗？");
    }

    function onRemove(treeId, treeNode, parentNode) {
        $.ajax({
            url: "manage/permission/delete",
            data: {"pid": parentNode.pid},
            type: "post",
            success: function (obj) {
                if (obj.result) {
                    show()
                } else {
                    layer.msg("删除失败", {time: 1000, icon: 5, shift: 6}, function () {
                    })
                }
            }
        })
    }

    function beforeRename(treeId, treeNode, newName) {
        if (newName.length == 0) {
            alert("名称不能为空");
            return false;
        }
        return true;
    }

    function onRename(treeId, treeNode, parentNode) {
        if (parentNode.name != parentNode.pname) {
            $.ajax({
                url: "manage/permission/update",
                data: {"pid": parentNode.pid, "name": parentNode.name},
                type: "post",
                success: function (obj) {
                    if (obj.result) {
                        show()
                    } else {
                        layer.msg("修改失败", {time: 1000, icon: 5, shift: 6}, function () {
                        })
                    }
                }
            });
        }
    }

    let newCount = 1;

    function addHoverDom(treeId, treeNode) {
        let sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        let addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        let btn = $("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            let zTree = $.fn.zTree.getZTreeObj("treeDemo");
            let addNodes = zTree.addNodes(treeNode, {
                id: (100 + newCount),
                pId: treeNode.id,
                name: "new node" + (newCount++)
            });
            $.ajax({
                url: "manage/permission/add",
                data: {"pid": treeNode.pid, "pname": addNodes[0].name},
                type: "post",
                success: function (obj) {
                    if (obj.result) {
                        show()
                    } else {
                        layer.msg("添加失败", {time: 1000, icon: 5, shift: 6}, function () {
                        })
                    }
                }
            });
            return false;
        });
    }

    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    }

    function show() {
        $.fn.zTree.init($("#treeDemo"), setting);
    }

    $(function () {
        layer.msg("加载中", {time: 200, icon: 16, shift: 5}, function () {
            show();
        });//layer
    });//入口
</script>
</body>
</html>
